<template>
  <div class="app-container bg-white" v-if="orderDetailData">
      <div class="page-body">
          <div>
              <h4>当前订单状态：{{orderStatus.name}}</h4>
              <el-steps :active="orderStatus.active" align-center finish-status="success" class="margin_top_20">
                <el-step :title="item.name" :description="item.time" v-for="(item, index) in orderStatus.list" :key="'status' + index"></el-step>
               </el-steps>
          </div>
          <el-collapse class="margin_top_20" v-model="activeNames">
            <el-collapse-item title="订单信息" name="1">
                <div class="collapse_content flex flex-start">
                    <div class="cell">
                        <div class="cell_item">
                            <span>订单号：</span>
                            <span>{{orderDetailData.orderNo | nodata}}</span>
                        </div>
                        <div class="cell_item">
                            <span>外部交易号：</span>
                            <span>{{orderDetailData.outTradeNo | nodata}}</span>
                        </div>
                        <div class="cell_item">
                            <span>订单类型：</span>
                            <span v-if="orderDetailData.orderType == 0">商品订单</span>
                            <span v-else-if="orderDetailData.orderType == 1">充值订单</span>
                            <span v-else-if="orderDetailData.orderType == 2">洗护服务订单</span>
                            <span v-else>无</span>
                        </div>
                        <div class="cell_item">
                            <span>营销类型：</span>
                            <span v-if="orderDetailData.marketingType == 0">普通订单</span>
                            <span v-else-if="orderDetailData.marketingType == 1">分享订单</span>
                            <span v-else-if="orderDetailData.marketingType == 2">拼团订单</span>
                            <span v-else-if="orderDetailData.marketingType == 3">采销订单</span>
                            <span v-else>无</span>
                        </div>
                        <div class="cell_item">
                            <span>渠道：</span>
                            <span v-if="orderDetailData.orderChannel == 1"><el-tag size="small">云裳严选</el-tag></span>
                            <span v-else-if="orderDetailData.orderChannel == 2"><el-tag size="small">洗e先生</el-tag></span>
                            <span v-else-if="orderDetailData.orderChannel == 3"><el-tag size="small">三翼鸟阳台场景</el-tag></span>
                            <span v-else>无</span>
                        </div>
                        <div class="cell_item">
                            <span>订单来源：</span>
                            <span v-if="orderDetailData.orderSource == 1"><el-tag size="small">小程序</el-tag></span>
                            <span v-else-if="orderDetailData.orderSource == 2"><el-tag size="small">pc端</el-tag></span>
                            <span v-else-if="orderDetailData.orderSource == 3"><el-tag size="small">移动端app</el-tag></span>
                            <span v-else-if="orderDetailData.orderSource == 4"><el-tag size="small">移动端web</el-tag></span>
                            <span v-else-if="orderDetailData.orderSource == 5"><el-tag size="small">屏端app</el-tag></span>
                            <span v-else>无</span>
                        </div>
                        <div class="cell_item">
                            <span>支付方式：</span>
                            <template v-if="orderDetailData.status == 1 || orderDetailData.status == 9">
                                <span>无</span>
                            </template>
                            <template v-else>
                                <span v-if="orderDetailData.paymentType == 100">微信扫码支付</span>
                                <span v-else-if="orderDetailData.paymentType == 101">微信js支付（微信公众号支付）</span>
                                <span v-else-if="orderDetailData.paymentType == 102">微信App支付</span>
                                <span v-else-if="orderDetailData.paymentType == 500">支付宝APP支付</span>
                                <span v-else-if="orderDetailData.paymentType == 502">支付宝扫码支付</span>
                                <span v-else>无</span>
                            </template>
                        </div>
                        <div class="cell_item">
                            <span>总金额：</span>
                            <span>{{orderDetailData.totalMoney | nomoney}}</span>
                        </div>
                        <div class="cell_item">
                            <span>优惠金额：</span>
                            <span>{{orderDetailData.couponMoney | nomoney}}</span>
                        </div>
                        <div class="cell_item">
                            <span>实付金额：</span>
                            <template v-if="orderDetailData.status == 1 || orderDetailData.status == 9">
                                <span>无</span>
                            </template>
                            <template v-else>
                                <span>{{orderDetailData.payMoney | nomoney}}</span>
                            </template>
                        </div>
                        <div class="cell_item" v-if="orderDetailData && orderDetailData.returnMoney">
                            <span>退款：</span>
                            <span>{{orderDetailData.returnMoney | nomoney}}</span>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell_item">
                            <div>买家备注</div>
                            <div class="margin_top_10"><el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="暂无买家备注" v-model="orderDetailData.remark" disabled></el-input></div>
                        </div>
                        <div class="cell_item">
                            <div>卖家备注</div>
                            <div class="margin_top_10"><el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="暂无卖家备注" v-model="orderDetailData.sellerRemark" disabled></el-input></div>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="物流信息" name="2" v-if="(orderExpressData && orderExpressData.length) || orderDetailData.orderType == 1 || orderDetailData.orderType == 2">
                <div class="collapse_content flex flex-start">
                    <div class="cell" v-for="(express, expressIndex) in orderExpressData" :key="'express' + expressIndex">
                        <template v-if="express">
                            <div class="cell_item">
                                <span>发货方式：</span>
                                <span>物流</span>
                            </div>
                            <div class="cell_item">
                                <span>物流公司：</span>
                                <span>{{express.expName}}</span>
                            </div>
                            <div class="cell_item">
                                <span>运单号：</span>
                                <span>{{express.number}}</span>
                            </div>
                            <div class="cell_item">
                                <el-collapse v-model="expressCollapse">
                                    <el-collapse-item class="no_padding" title="物流跟踪" name="1">
                                        <div class="collapse_content flex flex-start">
                                            <el-timeline v-if="express.newList && express.newList.length">
                                                <el-timeline-item v-for="(activity, index) in express.newList" :key="index" :timestamp="activity.status">{{activity.time}}</el-timeline-item>
                                            </el-timeline>
                                            <div v-else>暂无物流信息</div>
                                        </div>
                                    </el-collapse-item>
                                </el-collapse>
                            </div>
                        </template>
                        <div v-else>暂无物流信息</div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="用户信息" name="3" v-if="orderDetailData.marketingType == 0 || orderDetailData.marketingType == 1 || orderDetailData.marketingType == 2">
                <div class="collapse_content flex flex-start">
                    <div class="cell">
                        <div class="cell_item">
                            <span>用户昵称：</span>
                            <span>{{orderDetailData.username | nodata}}</span>
                        </div>
                        <!-- <div class="cell_item">
                            <span>用户等级：</span>
                            <span>v1 普通用户</span>
                        </div>
                        <div class="cell_item">
                            <span>累计消费次数：</span>
                            <span>4</span>
                        </div>
                        <div class="cell_item">
                            <span>累计消费金额：</span>
                            <span>13000</span>
                        </div> -->
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="客户信息" name="3" v-if="orderDetailData.marketingType == 3">
                <div class="collapse_content flex flex-start">
                    <div class="cell">
                        <div class="cell_item">
                            <span>客户名称：</span>
                            <span>{{orderDetailData.buyerMchName | nodata}}</span>
                        </div>
                        <!-- <div class="cell_item">
                            <span>累计下单次数：</span>
                            <span>4</span>
                        </div>
                        <div class="cell_item">
                            <span>累计下单金额：</span>
                            <span>13000</span>
                        </div> -->
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="收货人信息" name="4">
                <div class="collapse_content flex flex-start">
                    <div class="cell" v-for="(address, addressIndex) in orderDetailData.addressList" :key="'address' + addressIndex">
                        <div class="cell_item">
                            <span>姓名：</span>
                            <span>{{address.consigneeName | nodata}}</span>
                        </div>
                        <div class="cell_item">
                            <span>联系方式：</span>
                            <span>{{address.consigneePhone | nodata}}</span>
                        </div>
                        <div class="cell_item">
                            <span>收货地址：</span>
                            <span>{{address.provinceName}} {{address.cityName}} {{address.districtName}} {{address.streetName}} {{address.address}}</span>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="商家店铺信息" name="5" v-if="orderStoreData">
                <div class="collapse_content flex flex-start">
                    <div class="cell">
                        <div class="cell_item">
                            <span>店铺名称：</span>
                            <span>{{orderStoreData.storeName | nodata}}</span>
                        </div>
                        <div class="cell_item">
                            <span>商家：</span>
                            <span>{{orderDetailData.mchName | nodata}}</span>
                        </div>
                        <div class="cell_item">
                            <span>法人：</span>
                            <span>{{orderStoreData.contacts | nodata}}</span>
                        </div>
                        <div class="cell_item">
                            <span>开户银行：</span>
                            <span>{{orderStoreData.bankcard.bankName | nodata}}</span>
                        </div>
                        <div class="cell_item">
                            <span>银行卡号：</span>
                            <span>{{orderStoreData.bankcard.bankcardNumber | nodata}}</span>
                        </div>
                        <div class="cell_item">
                            <span>预留手机号：</span>
                            <span>{{orderStoreData.bankcard.bankPhone | nodata}}</span>
                        </div>
                        <div class="cell_item">
                            <span>联系电话：</span>
                            <span>{{orderStoreData.contactPhone | nodata}}</span>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="商品信息" name="6">
                <div class="collapse_content flex flex-start">
                    <div class="cell">
                        <el-table :data="orderDetailData.goodsItemList">
                            <el-table-column prop="goodsName" label="商品信息">
                                <template slot-scope="scope">
                                    <div class="flex align-center">
                                        <img :src="baseImgUrl + scope.row.surfaceImg" class="show_avator" v-if="scope.row.surfaceImg">
                                        <span class="show_avator" v-else>无封面</span>

                                        <div class="text-ellipsis padding_left_10" :title="scope.row.goodsName">{{scope.row.goodsName | nodata}}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="attributes" label="属性">
                                <template slot-scope="scope">
                                    <div v-for="(value, name, index) in scope.row.attributes" :key="'attr' + index">{{name}}：{{value}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="supplierNo" label="供应商信息">
                                <template slot-scope="scope">
                                    <div class="cell_item padding_none">
                                        <span>供应商编码：</span>
                                        <span>{{scope.row.supplierNo | nodata}}</span>
                                    </div>
                                    <div class="cell_item padding_none">
                                        <span>供应商名称：</span>
                                        <span>{{scope.row.supplierName | nodata}}</span>
                                    </div>
                                    <div class="cell_item padding_none">
                                        <span>联系人：</span>
                                        <span>{{scope.row.contacts | nodata}}</span>
                                    </div>
                                    <div class="cell_item padding_none">
                                        <span>预留手机号：</span>
                                        <span>{{scope.row.contactPhone | nodata}}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="num" label="数量" width="180"></el-table-column>
                            <el-table-column prop="price" label="单价" width="180"></el-table-column>
                            <el-table-column label="物联码" width="180">
                                <template slot-scope="scope">
                                    <!-- v-if="roleBtns.includes('sys:user:remove') || $store.getters.isAdmin" -->
                                    <button class="my-btn my-btn--mini plain" @click="goDetail(scope.row)">查看</button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="text-right price_content">
                            <div><span>总价：</span><span>￥{{orderDetailData.totalMoney | nomoney}}</span></div>
                            <div><span>运费：</span><span>￥{{orderDetailData.shippingMoney | nomoney}}</span></div>
                            <div v-if="orderDetailData.couponMoney"><span>优惠券：</span><span>-{{orderDetailData.couponMoney | nomoney}}</span></div>
                            <!-- <div><span>vip折扣：</span><span>-50</span></div> -->
                            <div><span>实付：</span><span>￥{{orderDetailData.payMoney | nomoney}}</span></div>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
            <!-- <el-collapse-item title="供应商信息" name="7">
                <div class="collapse_content flex flex-start">
                    <div class="cell" v-for="(supply, supplyIndex) in orderDetailData.goodsItemList" :key="'supply' + supplyIndex">
                        <div class="cell_item">
                            <span>供应商编码：</span>
                            <span>{{supply.supplierNo | nodata}}</span>
                        </div>
                        <div class="cell_item">
                            <span>供应商名称：</span>
                            <span>{{supply.supplierName | nodata}}</span>
                        </div>
                        <div class="cell_item">
                            <span>联系人：</span>
                            <span>{{supply.contacts | nodata}}</span>
                        </div>
                        <div class="cell_item">
                            <span>预留手机号：</span>
                            <span>{{supply.contactPhone | nodata}}</span>
                        </div>
                    </div>
                </div>
            </el-collapse-item> -->
            <el-collapse-item title="开票信息" name="7" v-if="orderDetailData.orderInvoice">
                <div class="collapse_content flex flex-start">
                    <div class="cell">
                        <div class="cell_item">
                            <span>发票状态：</span>
                            <span v-if="orderDetailData.orderInvoice.openIsInvoice == 0">未开票</span>
                            <span v-else-if="orderDetailData.orderInvoice.openIsInvoice == 1">已开票</span>
                        </div>
                        <template v-if="orderDetailData.orderInvoice.openIsInvoice == 1">
                        <div class="cell_item">
                            <span>发票内容：</span>
                            <span>商品明细</span>
                        </div>
                        <div class="cell_item">
                            <span>发票类型：</span>
                            <span v-if="orderDetailData.orderInvoice.invoiceType == 0">普通发票</span>
                            <span v-else-if="orderDetailData.orderInvoice.invoiceType == 1">增值税专用发票</span>
                        </div>
                        <div class="cell_item">
                            <span>发票抬头：</span>
                            <span>{{orderDetailData.orderInvoice.personalName ? '个人' : '企业'}}</span>
                        </div>
                        <div class="cell_item">
                            <span>抬头名称：</span>
                            <span>{{orderDetailData.orderInvoice.personalName ? orderDetailData.orderInvoice.personalName : orderDetailData.orderInvoice.companyName}}</span>
                        </div>
                        <div class="cell_item">
                            <span>开票金额：</span>
                            <span>{{orderDetailData.payMoney | nomoney}}</span>
                        </div>
                        <div class="cell_item">
                            <span>开票时间：</span>
                            <span>{{orderDetailData.openInvoiceTime | nodata }}</span>
                        </div>
                        <div class="cell_item">
                            <span>申请时间：</span>
                            <span>{{orderDetailData.orderInvoice.createTime | nodata}}</span>
                        </div>
                        </template>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="操作日志" name="8" v-if="logList && logList.length">
                <div class="collapse_content flex flex-start">
                    <div class="cell" v-infinite-scroll="loadLogData" :infinite-scroll-disabled="noMoreLogData" style="overflow:auto; height: 320px;">
                        <div class="cell_item" v-for="(item, index) of logList" :key="'log' + index">
                            <span>{{item.createTime}}&emsp;{{item.content}}</span>
                        </div>
                        <div class="cell_item" v-if="logLoading">加载中...</div>
                        <div class="cell_item" v-if="noMoreLogData">没有更多了</div>
                    </div>
                </div>
            </el-collapse-item>
          </el-collapse>
      </div>
      <iot-code :visible.sync="isShowCode" :goodCode="isGoodCode" :childSkuId="childSkuId" :data="goodsInfo"></iot-code>
  </div>
</template>

<script>
import IotCode from '../components/iotCode'
import { GetExpressDelivery } from '@/api/PublicServices';
import { GetOrderDetailData, GetOrderLogList } from '@/views/order-management/services/index';
export default {
    components: {
        IotCode
    },
    data() {
      return {
        orderStatus: {
            name: '',
            active: 1,
            list: [
                { name: '下单', time: '' },
                { name: '付款', time: '' },
                { name: '发货', time: '' },
                { name: '完成', time: '' }
            ]
        },
        orderDetailData: null,
        orderStoreData: null,
        orderExpressData: [],
        activeNames: ['1'],
        expressCollapse: [],
        textarea1: '',
        expressActivities: [],
        logLoading: false,
        pageIndex: 0,
        noMoreLogData: false,
        logList: [],
        tableData: [],
        hasExpressNo: [],
        baseImgUrl: process.env.VUE_APP_FILE_URL + '/',
        isShowCode: false,
        isGoodCode: '',
        childSkuId: '',
        goodsInfo: {}
      }
    },
    filters: {
        nodata(val) {
            if (!val) 
                return '无';
            else
                return val;
        },
        nomoney(val) {
            if (!val) 
                return '0.00';
            else
                return Number(val).toFixed(2);
        }
    },
    methods: {
        getPageData() {
            const loader = this.$loading({
                lock: true,
                fullscreen: true
            });
            GetOrderDetailData({ orderId: this.$route.query.id, orderType: this.$route.query.type })
            .finally(() => loader.close())
            .then(data => {
                if (data.code == 200) {
                    this.orderDetailData = data.data.order;
                    switch (this.orderDetailData.status) {
                        case 1:
                            this.orderStatus.name = '待付款';
                            this.orderStatus.active = 1;
                            break;
                        case 2:
                            this.orderStatus.name = '已付款';
                            this.orderStatus.active = 2;
                            break;
                        case 3:
                            this.orderStatus.name = '部分发货';
                            this.orderStatus.active = 3;
                            break;
                        case 4:
                            this.orderStatus.name = '已发货';
                            this.orderStatus.active = 3;
                            break;
                        case 5:
                            this.orderStatus.name = '已送达';
                            this.orderStatus.active = 3;
                            break;
                        case 6:
                            this.orderStatus.name = '已签收';
                            this.orderStatus.active = 3;
                            break;
                        case 7:
                            this.orderStatus.name = '已退款';
                            this.orderStatus.active = 4;
                            break;
                        case 8:
                            this.orderStatus.name = '已完成';
                            this.orderStatus.active = 4;
                            break;
                        case 9:
                            this.orderStatus.name = '已取消';
                            this.orderStatus.active = 4;
                            break;
                        default:
                            break;
                    }
                    this.orderStatus.list[0].time = this.orderDetailData.createTime;
                    this.orderStatus.list[1].time = this.orderDetailData.paymentTime;
                    this.orderStatus.list[2].time = this.orderDetailData.deliveryTime;
                    this.orderStatus.list[3].time = this.orderDetailData.confirmReceiptTime;
                    this.orderDetailData.goodsItemList = this.orderDetailData.goodsItemList.map((item, index) => {
                        item.attributes = JSON.parse(item.goodsParams).skuPropMap;
                        this.loadExpressData(item.expressNo, index);
                        return item;
                    })
                    this.orderStoreData = data.data.store;
                } else {
                    this.$message.error('订单详情获取失败!');
                }
            })
        },
        async loadExpressData(expressNo, index) {
            if (!expressNo || this.hasExpressNo.includes(expressNo)) return;
            const data = await GetExpressDelivery({ postCode: expressNo })
            if (data.code == 200 && data.data) {
                data.data.newList = JSON.parse(data.data.list);
                this.orderExpressData.push(data.data);
            }
        },
        loadLogData() {
            if (this.logLoading || this.noMoreLogData) return;
            this.pageIndex ++;
            this.logLoading = true;
            GetOrderLogList({ orderId: this.$route.query.id, pageNum: this.pageIndex, pageSize: 10 })
            .finally(() => this.logLoading = false)
            .then(data => {
                if (data.data.list < 10) {
                    this.noMoreLogData = true;
                }
                if (data.data.list && data.data.list.length) {
                    this.logList = this.logList.concat(data.data.list.map(item => {
                        return item;
                    }));
                }
            })
        },
        goDetail(data) {
            console.log(data)
            this.isGoodCode = data.id;
            // this.childSkuId = data.skuId;
            this.goodsInfo = data
            this.isShowCode = true;
        }
    },
    created() {
        this.getPageData();
        // this.loadLogData();
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-collapse-item__header {
    padding: 0 15px;
    background-color: rgba(211, 211, 211, 0.35);
}

::v-deep .no_padding .el-collapse-item__header {
    padding: 0;
    background-color: transparent;
}

.collapse_content {
    padding: 15px 30px;
}

.cell {
    flex: 1;

    &.half {
        width: 50%;
    }

    .cell_item {
        padding: 7.5px 0;

        > span {
            display: inline-block;

            &:first-child {
                width: 7em;
            }

            &:last-child {
                width: calc(100% - 7.5em);
                color: gray;
            }
        }
    }
}

.price_content {

    > div {
        padding: 7.5px;

        > span {
            display: inline-block;

            &:first-child {
                width: 6em;
                text-align: right;
            }

            &:last-child {
                width: 8em;
                text-align: left;
                color: gray;
            }
        }
    }
}

.show_avator {
    width: 64px;
    height: 64px;
    vertical-align: middle;
}
</style>
